<script lang="ts" setup>
import { TableSearch } from "@/components/common";
import { MediaLink } from '@/components/media';
import { UserTable } from "./shared/userTable.service";
import { ref } from "vue";
const userTable = new UserTable('User')
const { paging, getPatationList, onSearch, onSelectChange } = userTable.usePagin()
const onAdd = () => {
  console.log('add')
}
const onEdit = (id) => { }

</script>

<template>
  <div class="user">
    <TableSearch @onAdd="onAdd" tip="搜索用户" v-model:keyword="userTable.keyword.value" @on-search="onSearch">
    </TableSearch>
    <a-table :row-selection="{ selectedRowKeys: paging.selectedRowKeys, onChange: onSelectChange }"
      :dataSource="paging.dataSource" :columns="paging.columns" :pagination="paging.pagination"
      :loading="paging.loading" rowKey="id" @change="getPatationList" tableLayout="fixed"
      :scroll="{ x: 'max-content' }">
      <template #bodyCell="{ column, record }">
        <template v-if="column.key === 'action'">
          <div class="flex items-center flex-wrap">
            <a-button class="text-xs" type="primary" size="small" @click="onEdit(record.id)">编辑</a-button>
            <a-popconfirm title="确认删除？" @confirm="userTable.delInfo(record._id)">
              <a-button class="text-xs ml-base" danger size="small">删除</a-button>
            </a-popconfirm>
          </div>
        </template>
      </template>
    </a-table>
  </div>
</template>
